﻿<template>
  <a-modal centered :width="700" :title="modifyProjectInstanceEntity.title" :visible="modifyProjectInstanceEntity.showModify" @cancel="handleRefresh">
    <!--保存按钮-->
    <template slot="footer">
      <a-row>
        <a-col :span="24">
          <a-button icon="close-circle" @click="handleRefresh">取消</a-button>
          <a-divider type="vertical" />
          <a-button icon="reload" @click="handleReset" :loading="loading">重置</a-button>
          <a-divider type="vertical" />
          <a-button icon="check-circle" :loading="loading" @click="handleSubmit">保存</a-button>
        </a-col>
      </a-row>
    </template>
    <a-spin :spinning="spinning">
      <a-transfer :data-source="dataSource" :target-keys="targetKeys" :disabled="false" :list-style="{
        width: '300px',
        height: '300px',
      }" :show-search="true" :render="renderItem" :filter-option="(inputValue, item) => item.title.indexOf(inputValue) !== -1" :show-select-all="true" @change="handleChange">
      </a-transfer>
    </a-spin>
  </a-modal>
</template>

<script>
import { queryProjectinstanceList, addProjectinstance, updateProjectinstance } from './projectinstance'
export default {
  props: {
    modifyProjectInstanceEntity: {
      type: Object,
      required: true,
      default: function () {
        return {
          // 传递的主键
          id: '',
          // 是否展示编辑页面
          showModify: false,
          // 标题
          title: '',
        };
      },
    },
  },
  data() {
    return {
      // 执行保存后是否关闭当前页面
      hasClose: false,
      // 遮罩层加载
      spinning: false,
      // 按钮加载状态
      loading: false,
      // 绑定的数据源
      dataSource: [],
      // 显示在右侧框数据的 key 集合
      targetKeys: [],
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    renderItem(item) {
      const customLabel = (
        <span class="custom-item">
          {item.title}
        </span>
      );
      return {
        label: customLabel, // for displayed item
        value: item.title, // for title and filter matching
      };
    },
    handleChange(nextTargetKeys) {
      this.targetKeys = nextTargetKeys;
    },
    //#region 加载数据

    loadData() {
      //修改，详情获取详细信息
      this.spinning = true;
      let that = this
      queryProjectinstanceList(this.modifyProjectInstanceEntity.id).then((res) => {
        if (res.code != 200) {
          this.$notification.warning({ description: "数据不存在" });
          this.$emit("handleRefresh");
          return false;
        }
        that.dataSource = res.data.data.map(({ selected, ...rest }) => rest);
        that.targetKeys = res.data.data.filter(item => item.selected).map(item => item.key);
        that.spinning = false;

      })
        .catch((error) => {
          that.spinning = false;
        });
    },
    //#endregion

    //#region 保存
    // 保存
    handleSubmit() {
      let that = this
      this.spinning = true
      let projectIds = this.targetKeys.map(item => {
        return item
      })
      addProjectinstance({
        projectIds: projectIds,
        tenantId: this.modifyProjectInstanceEntity.id
      }).then((res) => {
        that.submitResult(res)
      })
        .catch((error) => {
          that.spinning = false;
        });
    },
    // 保存结果
    submitResult(res) {
      if (res.code == 200) {
        this.$notification.success({ description: res.msg })
        if (!this.hasClose) {
          this.$emit('handleRefresh')
        }
      } else {
        this.$notification.error({ description: res.msg })
      }
      this.spinning = false
    },
    //#endregion

    //#region  取消、关闭、重置
    // 取消、关闭
    handleRefresh() {
      this.spinning = false
      this.$emit('handleRefresh')
    },
    // 重置
    handleReset() {
      this.loadData()
    },
    //#endregion
  },
}
</script>
